<template>
	<view class="content">
		<nav-bar></nav-bar>
		<view class="content-warp">
			<view class="content-warp-card" v-for="(item,index) in Flaglist" :key="index" @click="goToview(index)">
				<image style="width: 70rpx;height: 70rpx;float: right;" :src="item.like"></image>
				<view class="content-warp-card-text">{{item.jiud}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import navBar from '../../component/nav-bar.vue';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				Flaglist: [{
						is_like: false,
						jiud: '四季酒店',
						like: '../../static/images/like.png'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						like: '../../static/images/like.png'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						like: '../../static/images/like.png'
					},
					{
						is_like: false,
						jiud: '四季酒店',
						like: '../../static/images/like.png'
					},
				]
			}
		},
		methods: {

			// openMenu() {
			// 	this.$refs.menu.show();
			// },
			goToview(index) {
				switch (index) {
					case 0:
						uni.navigateTo({
							url: '/pages/find/spot'
						})
						break
					case 1:
						uni.navigateTo({
							url: '/pages/find/hotel'
						})
						break
					case 2:
						uni.navigateTo({
							url: '/pages/find/shop'
						})
						break
					case 3:
						uni.navigateTo({
							url: '/pages/find/story'
						})
						break
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content-warp {
		margin: 30rpx;
		height: 900rpx;
		display: flex;
		flex-wrap: wrap;
		/* 允许换行 */
		justify-content: space-between;

		&-card {
			width: 280rpx;
			height: 350rpx;
			border-radius: 30rpx;
			padding: 30rpx;

			&-text {
				margin-top: 250rpx;
			}
		}
	}

	.content-warp-card:nth-of-type(1) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		/* 背景图不平铺 */
		background-repeat: no-repeat;
		/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		// background-attachment: fixed;
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
		/* 设置背景颜色，背景图加载过程中会显示背景色 */
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(2) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(3) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}

	.content-warp-card:nth-of-type(4) {
		background-image: url('../../static/logo.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-color: #464646;
	}
</style>